<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../static/userinfoPrivate/layui/css/layui.css" media="all">
	<!-- <link rel="stylesheet" href="../static/userinfoPrivate/css/thesame.css" media="all"> -->
	<link rel="stylesheet" href="../static/userinfoPrivate/userinfo/css/thesame.css" media="all">
	<link rel="stylesheet" href="../static/userinfoPrivate/pieChart/css/rightCon.css" media="all">
	<style type="text/css">
		.layui-carousel>[carousel-item]:before{ display: none; }
		.bed-stat-dl dl + div p{ 
			margin: 10px 40px;
			height: 60px;
			border-radius: 6px;
			border: 1px solid #1C9399; 
		}
		.bed-stat-dl dl + div em,.bed-stat-dl dl + div span{ display: block; color: #1C9399; }
		.bed-stat-dl dl + div em{ font-size: 14px; margin-top: 5px; }
		.bed-stat-dl dl + div span{ font-size: 24px; }
		.unfold-con{ font-size: 20px; line-height: 30px; text-align: center; }
	</style>
</head>

<body class="layui-layout-body">
	<div class="layui-body">
		<!-- 内容主体区域 -->
		<div class="scroll-box bgWhite box-shadows border-radius4">
			<div class="add-box-scroll">
				<div class="pad20px">
					<article class="border-radius4 box-shadows2 pad20px">
						<nav class="pandect-con">
							<ul class="bed-stat-dl align-items textCenter">
								<li>
									<dl>
										<dt><img src="../static/userinfoPrivate/pieChart/img/icon_laoren.png" alt="">户籍老人总数 </dt>
										<dd class="green" id="locationCount"></dd>
									</dl>
									<div>
										<p>
											<em>管辖老人总数</em>
											<span id="totalCount"></span>
										</p>
										<p>
											<em>常住老人总数</em>
											<span id="isLongStayCount"></span>
										</p>
									</div>
								</li> 
								<li>
									<nav class="number-resident textCenter">
										<ul id="areaCountUl">
											<!-- <li>
												<div>
													<h1>安亭片</h1>
												</div>
												<div class="data-width">
													<div id="main1" class="data-main" style="width: 100%; height: 200px;"></div>
												</div>
												<div>
													<p class="blue">26555</p>
												</div>
											</li> -->
											<!-- <li>
												<div>
													<h1>黄渡片</h1>
												</div>
												<div class="data-width">
													<div id="main2" class="data-main" style="width: 100%; height: 200px;"></div>
												</div>
												<div>
													<p class="yellow">26555</p>
												</div>
											</li>
											<li>
												<div>
													<h1>方泰片</h1>
												</div>
												<div class="data-width">
													<div id="main3" class="data-main" style="width: 100%; height: 200px;"></div>
												</div>
												<div>
													<p class="green">65565</p>
												</div>
											</li> -->
										</ul>
									</nav>
								</li>
							</ul>
						</nav>
					</article>
					<article class="border-radius4 box-shadows2 pad20px mt20px">
						<h1 class="mb15px fb">社区老年人口分布 </h1>
						<nav class="pandect-con">
							<ul class="" id="allOrgOfAreaSubUl">
								<!-- <li class="border-radius4 border1px pad20px">
									<div class="overflow title-two-con mb20px"><span class="left f16px fb">安亭片&nbsp;&nbsp;TOP10 </span></div>
									<div class="data-width">
										<div id="main4" class="data-main" style="width: 100%; height: 400px;"></div>
									</div>
								</li>
								<li class="border-radius4 border1px pad20px ml20px mr20px">
									<div class="overflow title-two-con mb20px"><span class="left f16px fb">黄渡片&nbsp;&nbsp;TOP10</span></div>
									<div class="data-width">
										<div id="main5" class="data-main" style="width: 100%; height: 400px;"></div>
									</div>
								</li>
								<li class="border-radius4 border1px pad20px">
									<div class="overflow title-two-con mb20px"><span class="left f16px fb">方泰片&nbsp;&nbsp;TOP10</span></div>
									<div class="data-width">
										<div id="main6" class="data-main" style="width: 100%; height: 400px;"></div>
									</div>
								</li> -->
							</ul>
						</nav>
					</article>
					<!-- <article class="border-radius4 box-shadows2 pad20px mt20px">
						<h1 class="mb15px fb">户籍分布统计</h1>
						<div class="financial-con">
							<article class="mr20px">
								<div class="financial-div financial-div-one">
									<div>
										<p><img src="../static/userinfoPrivate/pieChart/img/icon_changzhu.png" alt="" class="img-vertical">常住人口数</p>
										<h1 id="residentPopulationCount"></h1>
									</div>
									<div class="two">
										<div>
											<div>
												<p>本市户籍</p>
												<h2 id="thisCityHouseholdRegisterCount"></h2>
											</div>
										</div> 
										<div>
											<div>
												<p>嘉定（镇内）</p>
												<h2 id="inTownCount"></h2>
											</div>
											<div>
												<p>嘉定（镇外）</p>
												<h2 id="outTownCount"></h2>
											</div>
											<div>
												<p>其他</p>
												<h2 id="townOtherCount"></h2>
											</div>
										</div>
										<div>
											<div>
												<p>外地</p>
												<h2 id="fieldCount"></h2>
											</div>
											<div>
												<p>海外</p>
												<h2 id="overseasCount"></h2>
											</div>
										</div>
									</div>
								</div>
							</article>
							<article>
								<div class="mar15px">
									<div class="data-width"> 
										<div  id="" class="data-main registeredResidenceDistribution" style="width: 100%; height: 240px;"></div>
									</div>
								</div>
							</article>
						</div>
					</article> -->
					<article class="mt20px">
						<nav class="pandect-con">
							<ul>
								<li class="border-radius4 box-shadows2 pad20px mr10px">
									<h1 class="mb15px fb f20px">男女年龄分布</h1>
									<nav class="overflow data-age">
										<ul>
											<li>
												<div class="data-width">
													<div id="" class="data-main ageDistributionMan" style="width: 100%; height: 180px;"></div>
												</div>
												<div class="sex-man textRight">男<img src="../static/userinfoPrivate/pieChart/img/icon_man.png" class="ml10px"></div>
											</li>
											<li>
												<p>60岁以下</p>
												<p>60-69岁</p>
												<p>70-79岁</p>
												<p>80-89岁</p>
												<p>90-99岁</p>
												<p>100岁及以上</p>
											</li>
											<li>
												<div class="data-width">
													<div id="" class="data-main ageDistributionWoMan" style="width: 100%; height: 180px;"></div>
												</div>
												<div class="sex-man"><img src="../static/userinfoPrivate/pieChart/img/icon_woman.png" class="mr10px">女</div>
											</li>
										</ul>
									</nav>
								</li>
								<li class="border-radius4 box-shadows2 pad20px ml10px">
									<h1 class="mb15px fb f20px">老人年龄分布</h1>
									<div class="data-width">
										<div id="" class="data-main ageDistribution" style="width: 100%; height: 210px;"></div>
									</div>
								</li>
							</ul>
						</nav>
					</article>
					<article class="mt20px border-radius4 box-shadows2 low-carousel">
						<div class="layui-tab layui-tab-time pt10px">
							<div class="layui-form">
								<input type="hidden" id="careCrowdSize"  th:value="${careCrowdListSize}" name="">
								<ul class="layui-tab-title pl20px">
										 <!-- class="layui-this" -->

									<li th:each="list:${careCrowdList}" th:id="${listStat.index+1}" th:value="${list.labelCode}" th:text="${list.labelName}"></li>
									<!-- <li>低保</li>
									<li>纯老</li>
									<li>退伍军人</li>
									<li>失独</li> -->
								</ul>
							</div> 
							<div class="layui-tab-content bgWhite pad20px" id="careCrowdDiv">
								 <!-- id="slide1"  -->
								<!-- <div class="layui-tab-item layui-show">
									<div class="layui-carousel slide1" lay-filter="carofilter"> 
									    <div carousel-item  >
											 <div class="data-width">
												<div id="main14" class="data-main" style="width: 100%; height: 290px;"></div>
											</div>
											<div>条目3</div>
											<div>条目3</div>
									    </div>
									</div>
								</div> 
 -->

								<!-- <div class="layui-tab-item">222</div> 
								<div class="layui-tab-item">333</div> 
								<div class="layui-tab-item">4</div>
								<div class="layui-tab-item">5</div>  -->
							</div> 
						</div> 
					</article>
					<article class="mt20px">
						<nav class="pandect-con">
							<ul>
								<li class="border-radius4 box-shadows2 pad20px mr10px">
									<h1 class="mb15px fb f20px">特别关注</h1>
									<div class="data-width"> 
										<div id="" class="data-main careCrowdType" style="width: 100%; height: 210px;"></div>
									</div>
								</li>
								<li class="border-radius4 box-shadows2 pad20px ml10px">
									<h1 class="mb15px fb f20px">社保类型</h1>
									<div class="data-width">
										<div id="" class="data-main socialSecurityType" style="width: 100%; height: 210px;"></div>
									</div>
								</li>
							</ul>
						</nav>
					</article>
					<article class="mt20px">
						<div class="border-radius4 box-shadows2 pad20px mr10px">
							<div class="overflow">
								<h1 class="mb15px fb f20px left">居住状态</h1>
								<div class="right gray legend" id="liveStatusDiv">
									<span>安亭片</span>
									<span>黄渡片</span>
									<span>方泰片</span>
								</div>
							</div>
							<div class="data-width">
								<div id="" class="data-main loadLivingStatusType" style="width: 100%; height: 210px;"></div>
							</div>
						</div>
					</article>
				</div>
			</div>
		</div>
	</div>
<script src="../static/userinfoPrivate/js/jquery-2.1.3.min.js"></script>
<script src="../static/userinfoPrivate/layui/layui.js" charset="utf-8"></script>
<script src="../static/userinfoPrivate/js/echarts.min.js" charset="utf-8"></script>
<!-- <script>
	$("div.data-main").each(function(){
		let width = $(this).parent("div.data-width").width();
		$(this).css("width",width+"px");
	})
</script> -->
<script src="../static/userinfoPrivate/pieChart/js/data1.js" charset="utf-8"></script>
<script>

	$(function(){
		layui.use(['layer'], function() {

		})
		//左侧菜单栏
		menuBar();

		// $("div.data-main").each(function(){
		// 	let width = $(this).parent("div.data-width").width();
		// 	$(this).css("width",width+"px");
		// })

		$(".layui-tab-title li:eq(0)").addClass('layui-this');


		$('.layui-tab-title li').click(function(){
	    	$(this).addClass('layui-this').siblings().removeClass('layui-this');
	    	getCareCrowdDataChart($(this).val(),$(this).attr("id"));

			// console.log($(this).attr("id"));
	    	// var ssId = $("#careCrowdDiv .layui-show div:eq(0)").attr("id");

	    	 // console.log(slideIndexArr);
	    	
			menuBar("slide"+slideIndexArr[$(this).attr("id")-1]);
			

	   	});


		//获取数据
		getData();	

		//照顾人群柱状图
		getCareCrowdDataChart(null,1);
	})


	//左侧菜单栏
	function menuBar(elem){

		if (isNull(elem)) {
			elem = 'slide1';
		 }
		// console.log("====================="+elem);

		layui.use(['element', 'carousel'], function() {
			var element = layui.element;
			var carousel = layui.carousel;
			carousel.render({
			    elem: '#'+elem
			    ,width: '' //设置容器宽度
				,height: '300px'
			    ,arrow: 'none' //始终显示箭头
			    //,anim: 'updown' //切换动画方式
				,indicator: 'outside'
				,autoplay: true
			});
		});
	}


		
	function getData(){

		var formDate =
        {
            
        };

		$.ajax({
            url: "../userInfo/getStatisticsData",
            type: "get",
            dataType: "json",
            data: formDate,
            beforeSend: function(){

    //         	layui.use(['layer'], function() {
    //         		var layer = layui.layer;
				// 	layer.load(2, {shade: false}); //0代表加载的风格，支持0-2
				// });
			},
            async: true,
            success: function (res) {	
            	layui.use(['layer'], function() {
            		layer.closeAll();
				});
            	
            	// console.log(res);
                if (res.code == "200") {
                	//处理数据
                	dealData(res.data);
                }else{
                	layer.msg('查询失败', {time: 2000});
                }
            },
        });
	}


	var indexNum;
	//处理数据
	function dealData(data){
		var mainIndex = 0; //饼图main游标

		//-------------总数量----------------------
		$("#totalCount").text(data.userInfoTotalCount); 
		$("#locationCount").text(data.locationCount); 
		$("#isLongStayCount").text(data.isLongStayCount); 
		

		 //-------------各个片区的userInfo 总数  和子结构的 数量----------------------
		var orgAreaUlHtml =""; //饼图
		var orgAreaUlMain = [];
		var orgAreaOfCountSubHtml = "";//横线图
		var orgAreaOfCountSubMain = [];
		var  orgAreaTotalCount = 0;
		var  allOrgOfArea = data.orgAreaOfCount;


		
		var textColor = ['blue','yellow','green'];
		var textColorNum =0;
		for (var i = 0; i < allOrgOfArea.length; i++) {


			if (textColorNum > textColor.length-1) {
				textColorNum = 0
			}

			orgAreaUlHtml+='<li>';
			orgAreaUlHtml+='<div>';
			orgAreaUlHtml+='<h1>'+allOrgOfArea[i].orgName+'</h1>';
			orgAreaUlHtml+='</div>';
			orgAreaUlHtml+='<div class="data-width">';
			orgAreaUlHtml+='<div id="main'+(mainIndex+1)+'" class="data-main" style="width: 100%; height: 200px;"></div>';
			orgAreaUlMain.push(mainIndex+1);
			orgAreaUlHtml+='</div>';
			orgAreaUlHtml+='<div>';
			orgAreaUlHtml+='<p class="'+textColor[textColorNum]+'">'+allOrgOfArea[i].count+'</p>';
			textColorNum++;
			orgAreaUlHtml+='</div>';
			orgAreaUlHtml+='</li>';
			orgAreaTotalCount+=allOrgOfArea[i].count;
			mainIndex++;

			//横线图
			var orgAreaOfCountSub = allOrgOfArea[i].subOrgList;
			//社区人口分布
			
			if (i==allOrgOfArea.length-1) {
				orgAreaOfCountSubHtml +='<li class="border-radius4 border1px pad20px ">';
			}else{
				orgAreaOfCountSubHtml +='<li class="border-radius4 border1px pad20px mr20px">';
			}
			orgAreaOfCountSubHtml +='<div class="overflow title-two-con mb20px"><span class="left f16px fb">'+allOrgOfArea[i].orgName+'&nbsp;&nbsp;TOP10 </span></div>';

			orgAreaOfCountSubHtml +='<div class="data-width">';
			orgAreaOfCountSubHtml +='<div id="main'+(mainIndex+1)+'" class="data-main" style="width: 100%; height: 400px;"></div>';
			orgAreaOfCountSubMain.push(mainIndex+1);
			orgAreaOfCountSubHtml +='</div>';
			orgAreaOfCountSubHtml +='</li>';
			mainIndex++;

		}

		$("#areaCountUl").html(orgAreaUlHtml);
		$("#allOrgOfAreaSubUl").html(orgAreaOfCountSubHtml);

		var allOrgOfAreaColorArr = ['#31A4FF','#FFC15E','#1C9399'];
		var allOrgOfAreaColorArr2 = ['#5FD1FF','#FFE297','#37BCC1'];
		var allOrgOfAreaColorArr3 = ['rgba(61, 175, 255, 0.1)','rgba(255, 200, 105, 0.1)', 'rgba(28, 147, 153, 0.06)'];
		
		
		var allOrgOfAreaColorIndex = 0; //颜色游标卡


		var countSubColor1Arr=['#5FD1FF','#FCE56B','#3BC3C7'];
		var countSubColor2Arr=['#31A4FF','#F7C739','#1C9399'];
		var countSubColor1Index = 0;
		var countSubColor2Index = 0;

		for (var i = 0; i < allOrgOfArea.length; i++) {
			if (allOrgOfAreaColorIndex > allOrgOfAreaColorArr.length-1) {
				allOrgOfAreaColorIndex = 0
			}

			if (countSubColor1Index > countSubColor1Arr.length-1) {
				countSubColor1Index = 0
			}

			if (countSubColor2Index > countSubColor2Arr.length-1) {
				countSubColor2Index = 0
			}

			var color = allOrgOfAreaColorArr[allOrgOfAreaColorIndex];
			var color2 = allOrgOfAreaColorArr2[allOrgOfAreaColorIndex];
			var color3 = allOrgOfAreaColorArr3[allOrgOfAreaColorIndex];
			allOrgOfAreaColorIndex++;
			loadAllOrgOfArea("main"+(orgAreaUlMain[i]),orgAreaTotalCount,allOrgOfArea[i].count,color,color2,color3);


			//横线图 ----------------（社区人口分布）获取 各个片区  村的数量-------------------------
			var orgAreaOfCountSub = allOrgOfArea[i].subOrgList;
			// console.log(orgAreaOfCountSub);

			var color1 = countSubColor1Arr[countSubColor1Index];
			var color2 = countSubColor2Arr[countSubColor2Index];
			countSubColor1Index++;
			countSubColor2Index++;
			loadOrgAreaOfCountSub("main"+(orgAreaOfCountSubMain[i]),allOrgOfArea[i].orgNameArr,allOrgOfArea[i].countArr,color1,color2)
		}



		//--------------------------- 户籍分布统计 ----------------------------------------
		mainIndex++;
		
		//常住在安亭镇的老人总数
		// $("#residentPopulationCount").text(data.residentPopulationCount);
		// //本市户籍老人总数
		// $("#thisCityHouseholdRegisterCount").text(data.thisCityHouseholdRegisterCount);
		// //嘉定镇内老人总数
		// $("#inTownCount").text(data.inTownCount);
		// //嘉定镇外老人总数
		// $("#outTownCount").text(data.outTownCount);
		// //嘉定其他老人总数
		// $("#townOtherCount").text(data.townOtherCount);
		// //外地
		// $("#fieldCount").text(data.fieldCount);
		// //海外
		// $("#overseasCount").text(data.overseasCount);

		// $(".registeredResidenceDistribution").attr('id','main'+mainIndex) 
		// loadRegisteredResidenceDistribution('main'+mainIndex,data.distributionSituationPieChart)

		//--------------------老人年龄分布-----------------------
		//年龄分布 -男
		mainIndex++;
		$(".ageDistributionMan").attr('id','main'+mainIndex) 
		loadAgeDistributionMan('main'+mainIndex,data.ageDistributionNameArr,data.ageDistributionManCountArr);


		//年龄分布 -女
		mainIndex++;
		$(".ageDistributionWoMan").attr('id','main'+mainIndex) 
		loadAgeDistributionWoMan('main'+mainIndex,data.ageDistributionNameArr,data.ageDistributionWoManCountArr);

		//年龄分布 
		mainIndex++;
		$(".ageDistribution").attr('id','main'+mainIndex) 
		loadAgeDistribution('main'+mainIndex,data.ageDistribution);

		//------------------------特别关注（照顾人群）-----------------------
		mainIndex++;
		$(".careCrowdType").attr('id','main'+mainIndex) 
		loadCareCrowdType('main'+mainIndex,data.careCrowdList);
		
		//------------------------社保类型-----------------------------------
		mainIndex++;
		$(".socialSecurityType").attr('id','main'+mainIndex) 
		loadSocialSecurityType('main'+mainIndex,data.socialSecurityTypeList);
		
		//------------------------居住状态-----------------------------------
		mainIndex++;
		indexNum = mainIndex++;
		$(".loadLivingStatusType").attr('id','main'+mainIndex) 
		// id liveStatusDiv
		var liveStatusDivHtml = "";
		for (var i = 0; i < allOrgOfArea.length; i++) {
			liveStatusDivHtml+='<span>'+allOrgOfArea[i].orgName+'</span>';
		}
		$("#liveStatusDiv").html(liveStatusDivHtml);
		loadLivingStatus('main'+mainIndex,data.livingHomeNameArr,data.livingHomeData,data.livingHomeMax,data.livingHomeInterval);
		
	}


	//获取 统计数据   - 照顾人群 柱状图
	function getCareCrowdDataChart(careCrowLabelCode,num){

		if (isNull(careCrowLabelCode)) {
			careCrowLabelCode =  $(".layui-this").val();
		}
		// console.log(careCrowLabelCode);

		var formDate =
        {	
            careCrowLabelCode : careCrowLabelCode
        };

		$.ajax({
            url: "../userInfo/getCareCrowdDataChart",
            type: "get",
            dataType: "json",
            data: formDate,
            beforeSend: function(){
    //         	layui.use(['layer'], function() {
    //         		var layer = layui.layer;
				// 	layer.load(2, {shade: false}); //0代表加载的风格，支持0-2
				// });
			},
            async: false,
            success: function (res) {	
    //         	layui.use(['layer'], function() {
    //         		layer.closeAll();
				// });
            	// console.log(res);
                if (res.code == "200") {
                	//处理数据
                	dealCareCrowdData(res.data,num);
                }else{
                	layer.msg('照顾人群 柱状图 查询失败', {time: 2000});
                }
            },
        });

	}

	//处理  照顾人群 柱状图  数据
	var slideIndex=0;
	var slideIndexArr ;
	function dealCareCrowdData(data,num){
		// console.log("indexNum="+indexNum);
		if (isNull(indexNum)) {
			indexNum = 10000;
		}

		slideIndexArr =[];
		var  mainIndex = indexNum;
		var dataList = data.list;
		var careCrowdDivHtml="";
		var careCrowdIndex = [];
		let width = $("#careCrowdDiv").width();


		var careCrowdSize  = $("#careCrowdSize").val();
		
		for (var k = 0; k < careCrowdSize; k++) {
			slideIndex++;
			slideIndexArr.push(slideIndex);
			
			if (k==0) {
				careCrowdDivHtml+='<div class="layui-tab-item layui-show">';
			}else{
				careCrowdDivHtml+='<div class="layui-tab-item">';
			}
			careCrowdDivHtml+='<div class="layui-carousel" id="slide'+slideIndex+'" >';
			careCrowdDivHtml+='<div carousel-item >';
		
			for (var i = 0; i < dataList.length; i++) {
				mainIndex++;
				careCrowdDivHtml+='<div class="data-width">';
				careCrowdDivHtml+='<div id="main'+mainIndex+'" class="data-main" style="width: '+width+'px; height: 290px;"></div>';
				careCrowdDivHtml+='</div>';
				careCrowdIndex.push(Number(mainIndex));
			}	
			careCrowdDivHtml+='</div>';
			careCrowdDivHtml+='</div>';
			careCrowdDivHtml+='</div>';

			// console.log(careCrowdDivHtml);

		}
		// console.log(careCrowdIndex);

		$("#careCrowdDiv").html(careCrowdDivHtml);

		var max = data.max;
		var interval = data.interval;
		for (var j = 0; j < dataList.length; j++) {
			 
			 if (num==1) {
				loadcareCrowdBarChart(dataList[j].orgName,"main"+(careCrowdIndex[j]),dataList[j].careCrowdOrgNameArr,dataList[j].careCrowdCountArr,max,interval);
			 }else{
			 	var numIndex = Number(((num-1)*dataList.length)+j);
				loadcareCrowdBarChart(dataList[j].orgName,"main"+(careCrowdIndex[numIndex]),dataList[j].careCrowdOrgNameArr,dataList[j].careCrowdCountArr,max,interval);
			 }
		}	

		
	}


	function isNull(value) {
		return value == null || value === "" || value === undefined;
	}

	
</script>
</body>
</html>
